import styled from 'styled-components';
import React, {useState} from 'react';
import {Category, CategoryMap} from 'hooks/useTags';


const Selector = styled.ul`
  > li{
      display: inline-block;
      border-radius: 16px;
      background: #f1f1f3;
      color: #c1c2c4;
      padding: 2px 16px;
      margin-right: 12px;
      &:nth-child(1){
        &.selected{
          background: #FF865E;
          color: white;
        }
      }
      &:nth-child(2){
        &.selected{
          background: #FEE440;
          color: white;
        }
      }
  }
`;

type Props = {
  value: Category;
  onClick: (newValue: Category) => void;
}
const CategoryList: React.FC<Props> = (props) => {
  const category = props.value;
  const [categoryList] = useState<Category[]>(['-', '+']);
  return (
    <Selector>
      {categoryList.map(sign =>
        <li key={sign} className={category === sign ? 'selected' : ''}
            onClick={() => props.onClick(sign)}>{CategoryMap[sign]}</li>
      )}
    </Selector>
  );
};

export {CategoryList};